<script setup lang="ts">
import { ref } from "vue";

const zipFile = ref(
  "\\\\its-data\\file\\swcontrol\\RDP\\temp\\LMB\\lxf\\机器人通知.zip"
);
const targetDirectory = ref("e:\\users\\lanxf01\\Desktop\\targetdir");

async function selectFileAsync() {
  // use the exposed API in the renderer
  const filePath = await window.electronAPI.selectFile();
  if (filePath != null) {
    zipFile.value = filePath;
  }
}

async function selectFolderAsync() {
  // use the exposed API in the renderer
  const directory = await window.electronAPI.selectFolder();
  if (directory != null) {
    targetDirectory.value = directoryp;
  }
}

const isLoading = ref(false);

async function unzipAsync() {
  isLoading.value = true;
  console.log(zipFile.value);
  console.log(targetDirectory.value);
  try {
    await window.electronAPI.unzip({
      zipFilePath: zipFile.value,
      outputDir: targetDirectory.value,
    });
    alert("解压完成！");
  } catch (error) {
    console.log(error);
    alert("解压错误！" + error);
  }
  isLoading.value = false;
}
</script>

<template>
  <main
    style="
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    "
    v-loading="isLoading"
  >
    <div class="input-item">
      <span class="input-lable">文件名</span>
      <el-input
        v-model="zipFile"
        type=" text"
        class="file-input"
        readonly
      ></el-input>
      <el-button circle icon="Search" @click="selectFileAsync"></el-button>
    </div>
    <div class="input-item" style="margin-top: 10px">
      <span class="input-lable">解压目录</span>
      <el-input
        v-model="targetDirectory"
        type=" text"
        class="file-input"
      ></el-input>
      <el-button circle icon="Search" @click="selectFolderAsync"></el-button>
    </div>
    <div class="input-item" style="margin-top: 10px">
      <el-button type="primary" @click="unzipAsync">提取文件</el-button>
    </div>
  </main>
</template>

<style scoped>
.input-item {
  display: flex;
  align-items: center;
}

.file-input {
  width: 500px;
  margin-right: 10px;
}

.input-lable {
  margin-right: 10px;
  width: 62px;
  display: block;
}
</style>
